<template>
    <div class="article-list">
        <Form :model="formItem" ref="formItem" :inline="true" action="javascript:void(0)">
            <FormItem>
                <TreeSelect clearable v-model="formItem.cateid" :data="cateSelect" v-width="200"></TreeSelect>
            </FormItem>
            <FormItem>
                <DatePicker :model-value="formItem.datetime" type="datetimerange" format="yyyy-MM-dd" style="width: 260px" placeholder="开始时间 - 结束时间" @on-change="dateChange($event)"></DatePicker>
            </FormItem>
            <FormItem>
                <Input v-model="formItem.key" placeholder="输入关键字查询..."></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="renderTable()">筛选</Button>
            </FormItem>
        </Form>
        <div class="action-btn">
            <Button size="small" @click="removeMultiple()" style="margin-right: 8px" type="error">批量删除</Button>
            <Button size="small" @click="showCreate()" type="success">添加文章</Button>
        </div>
        <Table border :columns="tableColumn" ref="selection" @on-selection-change="changeData($event)" :data="dataList" :loading="dataLoading">
            <template #push="{ row }">
                <Tag v-if="row.push_flag" color="cyan">是</Tag>
                <Tag v-if="!row.push_flag" color="orange">否</Tag>
            </template>
            <template #cate="{ row }">
                {{ row.cate.name }}
            </template>
            <template #hits="{ row }">
                <Tag color="geekblue">{{ row.hits }}</Tag>
            </template>
            <template #action="{ row }">
                <Button type="info" size="small" style="margin-right: 5px;float:left" @click="showEdit(row.id)">编辑</Button>
                <Button type="error" size="small" @click="removeDetail(row.id)">删除</Button>
            </template>
        </Table>
        <!-- 分页 -->
        <div class="table-page">
            <Page size="small" ref="listPage" :total="pages.total" :model-value="pages.current" :page-size="pages.size" show-elevator show-total @on-change="changePage"></Page>
        </div>
    </div>
    </template>
    
    <script>
    export default {
        name: 'ArticleList',
        data() {
            return {
                dataLoading: true,
                cateSelect: [],
                formItem: {
                    'key': '',
                    'cateid': 0,
                    'datetime': ['',''],
                    'startAt':'',
                    'endAt':''
                },
                pages: {
                    current: 1,
                    total: 0,
                    size: 10
                },
                tableColumn: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                    },
                    {
                        title: 'Id',
                        key: 'id',
                        width: 70,
                    },
                    {
                        title: '标题',
                        minWidth: 300,
                        key: 'title'
                    },
                    {
                        title: '栏目',
                        width: 150,
                        slot: 'cate'
                    },
                    {
                        title: '推荐',
                        width: 70,
                        slot: 'push'
                    },
                    {
                        title: '点击',
                        width: 100,
                        slot: 'hits'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 130,
                        align: 'left',
                    }
                ],
                dataList: [],
                selectData: [],
            }
        },
        watch:{
            $route:{
                immediate: true,
                handler(newval,oldval){
                    // console.log('newval',newval)
                    this.pages.current = newval.query.page != undefined ? parseInt(newval.query.page) : 1;
                    this.formItem.key = newval.query.key != undefined ? newval.query.key : '';
                    this.formItem.cateid = newval.query.cateid != undefined && newval.query.cateid != '' ? parseInt(newval.query.cateid) : 0;
                    this.formItem.startAt = newval.query.starttime != undefined ? newval.query.starttime : '';
                    this.formItem.endAt = newval.query.endtime != undefined ? newval.query.endtime : '';
                    this.getTableList();
                }
            }
        },
        created() {
            this.$api.category.select().then(res => {
                this.cateSelect = res.result;
            });
        },
        methods: {
            dateChange(date){
                this.formItem.datetime[0] = date[0] != '' ? date[0] + ' 00:00:00' : '';
                this.formItem.datetime[1] = date[1] != '' ? date[1] + ' 23:59:59' : '';
                this.formItem.startAt = this.formItem.datetime[0];
                this.formItem.endAt = this.formItem.datetime[1];
            },
            getTableList() {
                var params = { page: this.pages.current, size: this.pages.size, 'key': this.formItem.key, 'cateid': this.formItem.cateid, 'startAt': this.formItem.startAt, 'endAt': this.formItem.endAt };
                this.dataLoading = true;
                this.$api.article.list(params).then(res => {
                    this.dataList = res.result.list;
                    this.pages.total = res.result.total
                }).finally(e=>{
                    this.dataLoading = false;
                });
            },
            changePage() {
                this.pages.current = this.$refs['listPage'].currentPage;
                this.getTableList();
            },
            renderTable() {
                this.pages.current = 1;
                this.getTableList();
            },
            showCreate() {
                this.$router.push({
                    path:'/article/create'
                });
            },
            showEdit(id) {
                this.$router.push({
                    path:'/article/update',
                    query:{
                        id:id
                    }
                });
            },
            removeDetail(id) {
                // 弹出确认框
                this.$Modal.confirm({
                    title: '警告',
                    content: '<p>此操作不可恢复，三思而后行...</p>',
                    onOk: () => {
                        this.$api.article.remove({ detail_id: id }).then(res => {
                            this.getTableList();
                        });
                    }
                });
            },
            changeData(index) {
                this.selectData = index
            },
            removeMultiple() {
                // 弹出确认框
                this.$Modal.confirm({
                    title: '警告',
                    content: '<p>此操作不可恢复，三思而后行...</p>',
                    onOk: () => {
                        var ids = [];
                        this.selectData.forEach((item) => {
                            ids.push(item.id);
                        })
                        this.$api.article.deleteall({ detail_id: ids }).then(res => {
                            this.getTableList();
                        });
                    }
                });
            },
        }
    }
    </script>
    